﻿<%@ Page Language="C#" AutoEventWireup="false" MasterPageFile="~/modules/MobilePack/Mobile.Master"
    CodeBehind="ImageGallery.aspx.cs" Inherits="EPiServer.Labs.MobilePack.Site.modules.MobilePack.ImageGallery" %>

<asp:Content runat="server" ContentPlaceHolderID="BodyContents">
    <div data-role="page" data-add-back-btn="false" class="gallery-page" id="Gallery<%= CurrentPage.PageLink.ID %>"
        data-theme='<%= GetSiteData()["PageTheme"] %>'>
        <div data-role="header" data-theme='<%= GetSiteData()["PageTheme"] %>'>
            <episerver:property runat="server" customtagname="h1" propertyname="PageName" />
            <a href='<%= GetSiteData().LinkURL %>' data-icon="home" data-iconpos="notext" data-direction="reverse"
                class="ui-btn-left jqm-home">Home</a>
        </div>
        <div data-role="content">
            <asp:Literal runat="server" ID="EditorMessage" />
            <asp:PlaceHolder runat="server" ID="ImageGalleryPlaceHolder">
            <script type="text/javascript">

                (function (window, $, PhotoSwipe) {

                    $('#Gallery<%= CurrentPage.PageLink.ID %>').live("pageshow", function (e) {


                        var currentPage = $(e.target),
				   photoSwipeInstanceId = currentPage.attr('id'),
				   photoSwipeInstance = PhotoSwipe.getInstance(photoSwipeInstanceId)
                        options = {};

                        if (typeof photoSwipeInstance === "undefined" || photoSwipeInstance === null) {
                            photoSwipeInstance = $("ul.mobilepack-gallery a", e.target).photoSwipe(options, photoSwipeInstanceId);
                        }

                        return true;
                    });

                } (window, window.jQuery, window.Code.PhotoSwipe));
	

            </script>
            <asp:Repeater runat="server" ID="filesRepeater">
                <HeaderTemplate>
                    <ul class="mobilepack-gallery">
                </HeaderTemplate>
                <ItemTemplate>
                    <li><a href="<%# Eval("VirtualPath") %>" rel="external">
                        <img src="<%# Eval("VirtualPath") %>" alt="<%# Eval("Name") %>" /></a></li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul></FooterTemplate>
            </asp:Repeater>
            </asp:PlaceHolder>
        </div>
        <script>
            // This event gets called after a page has finished loading (same as $(document).ready() in jQuery).
            // Placed here because if bug in jQuery Mobile and pageinit not always firing
            $(".gallery-page").live('pageinit', MobilePack.pageInit);
        </script>
    </div>
</asp:Content>
